<template>
  <div>
    <div class="el-col">
      <div class="group-panel">
        <div>
          <el-form ref="formRef" :model="relationDatas" @submit.native.prevent>
            <div class="outerPanel">
              <div v-if="relationDatas.subSyntaxExpressnList.length > 0" class="condition" @click="changeLogic()">
                {{ relationDatas.flag === 'and' ? '且' : '或' }}
              </div>
              <div v-for="(item, index) in relationDatas.subSyntaxExpressnList" :key="item + index" class="innerPanel">
                <el-row>
                  <div
                    v-if="item.expressionVoList.length > 0"
                    class="condition child-condition"
                    @click="changeLogic(index)">
                    {{ item.flag === 'and' ? '且' : '或' }}
                  </div>
                  <div v-for="(i, idx) in item.expressionVoList" :key="i + idx">
                    <div class="son-panel">
                      <i
                        v-show="item.expressionVoList.length > 1"
                        class="el-icon-circle-close"
                        @click="removeCondition(index, idx)" />
                      <el-form-item
                        :prop="`subSyntaxExpressnList.${index}.expressionVoList.${idx}.contextValue`"
                        style="margin: 0 10px"
                        :rules="[
                          {
                            required: true,
                            message: '请选择',
                            trigger: 'blur',
                          },
                        ]">
                        <el-select
                          v-model="i.contextValue"
                          placeholder="请选择"
                          clearable
                          style="width: 240px"
                          @change="handleEvent($event, 'contextValue', idx, index)">
                          <el-option
                            v-for="(item, childIndex) in fieldObj.listTypeInfo.contextList"
                            :key="childIndex"
                            :label="item.label"
                            :value="item.value" />
                        </el-select>
                      </el-form-item>
                      <el-form-item
                        :prop="`subSyntaxExpressnList.${index}.expressionVoList.${idx}.operators`"
                        style="margin: 0 10px"
                        :rules="[
                          {
                            required: true,
                            message: '请选择',
                            trigger: 'change',
                          },
                        ]">
                        <el-select
                          v-model="i.operators"
                          placeholder="请选择"
                          clearable
                          style="width: 240px"
                          @change="handleEvent($event, 'operators', idx, index)">
                          <el-option
                            v-for="(item, childIndex) in fieldObj.listTypeInfo.operatorsList"
                            :key="childIndex"
                            :label="item.label"
                            :value="item.value" />
                        </el-select>
                      </el-form-item>
                      <el-form-item
                        :prop="`subSyntaxExpressnList.${index}.expressionVoList.${idx}.matchValue`"
                        style="margin: 0 10px"
                        :rules="[
                          {
                            required: true,
                            message: '请输入',
                            trigger: 'blur',
                          },
                        ]">
                        <el-input
                          v-model="i.matchValue"
                          placeholder="请输入"
                          clearable
                          style="width: 240px"
                          @change="handleEvent($event, 'matchValue', idx, index)" />
                      </el-form-item>
                    </div>
                  </div>
                </el-row>
                <el-button type="text" icon="el-icon-circle-plus-outline" @click="addConditions(index)"
                  >添加条件</el-button
                >
                <el-button type="text" class="remove-group" icon="el-icon-delete" @click="removeConditons(index)"
                  >删除条件组</el-button
                >
              </div>
            </div>
          </el-form>
        </div>
        <el-button type="text" icon="el-icon-circle-plus-outline" class="add-group" @click="addGroup"
          >添加条件组</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    relationData: {
      type: Object,
      default: () => {},
    },
    fieldObj: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      relationDatas: this.relationData,
    }
  },
  methods: {
    // 改变逻辑
    changeLogic(i) {
      if (i !== undefined) {
        let flag = this.relationDatas.subSyntaxExpressnList[i].flag
        flag === 'and' ? (flag = 'or') : (flag = 'and')
        this.relationDatas.subSyntaxExpressnList[i].flag = flag
      } else {
        this.relationDatas.flag === 'and' ? (this.relationDatas.flag = 'or') : (this.relationDatas.flag = 'and')
      }
    },
    addConditions(index) {
      this.$emit('addConditions', index)
    },
    removeConditons(index) {
      this.relationDatas.subSyntaxExpressnList.splice(index, 1)
      this.$emit('handleChange', this.relationDatas)
    },
    addGroup() {
      this.$emit('addGroup')
    },

    removeCondition(index, idx) {
      this.relationDatas.subSyntaxExpressnList[index].expressionVoList.splice(idx, 1)
    },
    /** 表单触发事件 */
    handleEvent(value, field, idx, index) {
      this.relationDatas.subSyntaxExpressnList[index].expressionVoList[idx][field] = value
      if (field === 'operators') {
        this.relationDatas.subSyntaxExpressnList[index].expressionVoList[idx].matchValue = ''
      }
      if (field === 'contextValue') {
        const label = this.fieldObj.listTypeInfo.contextList.filter((item, index) => {
          return item.value === value
        })
        if (label.length > 0) {
          // this.relationDatas.subSyntaxExpressnList[index].expressionVoList[idx].variable =
          //   label[0].label;
        }
      }
      this.$emit('handleChange', this.relationDatas)
    },
    /** 必填项校验 **/
    handleSubmit() {
      return new Promise((resolve, reject) => {
        this.$refs['formRef'].validate((valid) => {
          if (valid) {
            resolve(this.relationDatas)
            return this.relationDatas
          } else {
            this.$message.error('请完善表单')
            reject('1111111111111111111error submit!!')
          }
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.group-panel {
  width: 100%;
  overflow: auto;
  background: transparent;
}
.outerPanel {
  display: block;
  position: relative;
  width: 100%;
}
.innerPanel {
  background-color: transparent;
  height: auto;
  padding: 5px;
  margin: 10px 10px 10px 40px;
  &::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 20px;
    border-left: 1px solid #cfe4fe;
  }
}

.condition {
  position: absolute;
  left: 8px;
  top: calc(50% - 24px);
  z-index: 3;
  cursor: pointer;
  width: 24px;
  height: 24px;
  line-height: 24px;
  color: #2979ff;
  border: none;
  text-align: center;
  background: #edf5ff;
  border-radius: 2px;
  outline: none;
  &.child-condition {
    left: 0;
    top: calc(50% - 12px);
  }
}
.son-panel {
  display: flex;
  flex: 1;
  margin-left: 40px;
  align-items: center;
  margin-bottom: 20px;
  ::v-deep.content {
    align-items: center;
    padding-bottom: 0;
  }
  &::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    border-left: 1px solid #cfe4fe;
    left: 10px;
  }
  & > i {
    margin-right: 10px;
    color: #4b6eef;
  }
}
.remove-group {
  color: red !important;
}
.add-group {
  padding-left: 10px;
}
</style>
